<template>
	<com-page bg-color="rgba(0,0,0,.5)">
		<com-status-bar color="rgba(0,0,0,.5)"></com-status-bar>
		<view class="position-relative y-flex-1">
			<scroll-view scroll-y="true" class="position-absolute-cover">
				<com-gap height="50"></com-gap>
				<com-image :style="{
					'height': poster ? 'auto' : imageMinHeight + 'px'
				}" class="poster-image" :src="poster" mode="widthFix">
					<template #loading>
						<com-text :color="skinColor.color_3" size="30" :value="'生成' + shareType + '中'"></com-text>
					</template>
					<template #error>
						<com-text :color="skinColor.color_3" size="30" :value="'生成' + shareType + '失败'"></com-text>
					</template>
				</com-image>
				<com-gap height="50"></com-gap>
			</scroll-view>
		</view>
		<view v-if="show" elevation="3" class="poster-btns y-flex" :style="{
			'background-color': skinColor.color_bg_2,
		}">
			<text class="poster-btn" @tap="share" :style="{color: skinColor.color_1}">分享到</text>
			<com-gap height="1px" :color="skinColor.color_gap_1"></com-gap>
			<text class="poster-btn" @tap="save" :style="{color: skinColor.color_1}">保存到手机</text>
			<com-gap height="10" :color="skinColor.color_gap_1"></com-gap>
			<text class="poster-btn" @tap="hide" :style="{color: skinColor.color_1}">取消</text>
		</view>
		<com-poster ref="poster"></com-poster>
		<com-notify ref="notify"></com-notify>
	</com-page>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	import { appName, appLogo } from '@/assets/js/config.js'
	export default {
		mixins: [appMixin],
		computed: {
			imageMinHeight() {
				return this.windowHeight - uni.upx2px(100) - uni.getSystemInfoSync().safeArea.top
			},
			shareType () {
				return this.params.shareType == 'user' ? '名片' : '海报'
			},
			params () {
				return this.$Route.query.params
			}
		},
		data() {
			return {
				poster: '',
				show: false
			}
		},
		onReady() {
			this.$nextTick(function() {
				this.start()
			})
		},
		methods: {
			start() {
				const image = this.params.shareType == 'user' ? this.params.avatar : this.params.cover
				if (image) {
					this.app.$utils.downloadImageSaveLocal({
						src: image,
						referer: this.params.referer || '',
						complete: path => {
							uni.getImageInfo({
								src: path,
								success: (rect) => {
									this.perposePoster(rect, path)
								},
								fail: (err) => {
									this.$refs.notify.fail('uni.getImageInfo:fail')
								}
							})
						}
					})
				} else {
					this.perposePoster()
				}
			},
			perposePoster (rect, src) {
				if ( this.params.shareType == 'user' ) this.perposeUserPoster(rect, src)
				else this.perposeResourcePoster(rect, src)
			},
			//人物分享
			perposeUserPoster (rect, src) {
				const height = 1000
				const imageSize = 100
				const top = 150
				const form = [{
					src: src || appLogo,
					x: 100,
					y: top,
					width: imageSize,
					height: imageSize,
					radius: 20,
					type: 'image'
				}, {
					text: this.params.title,
					x: 120 + imageSize,
					y: top + 35,
					color: '#fff',
					size: 40,
					lines: 1,
					width: 280,
					style: 'fill',
					type: 'text'
				}, {
					text: this.params.sourceName,
					x: 120 + imageSize,
					y: top + imageSize - 5,
					color: '#999',
					size: 22,
					width: 280,
					lineHeight: uni.upx2px(10),
					lines: 1,
					style: 'fill',
					type: 'text'
				}, {
					src: 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&margin=10&data=' + this.params.shareUrl,
					x: 100,
					y: top + 50 + imageSize,
					width: 550,
					height: 550,
					type: 'image'
				}, {
					x: 320,
					y: top + 270 + imageSize,
					width: imageSize + 10,
					height: imageSize + 10,
					radius: 20,
					color: '#fff',
					style: 'fill',
					shadowColor : 'rgba(0,0,0,.5)',
					shadowBlur: 10,
					shadowOffsetX: 5,
					shadowOffsetY: 5,
					type: 'rect'
				}, {
					src: src || appLogo,
					x: 325,
					y: top + 275 + imageSize,
					width: imageSize,
					height: imageSize,
					radius: 20,
					type: 'image'
				}, {
					text: '长按识别二维码',
					x: 295,
					y: top + 650 + imageSize,
					color: '#999',
					size: 20,
					style: 'fill',
					type: 'text'
				}]
				const options = {
					width: 750,
					height: height,
					background: this.skinColor.color_black,
					radius: 20
				}
				this.$refs.poster.start({
					options: options,
					data: form,
					success: (res) => {
						this.show = true
						this.poster = res.tempFilePath
					},
					fail: (err) => {
						this.$refs.notify.fail('生成名片失败')
					}
				})
			},
			//资源分享
			perposeResourcePoster(rect, src) {
				let imageHeight = rect ? (700 / rect.width) * rect.height : 0
				if (imageHeight / 750 > 2) {
					imageHeight = 2 * 750
				}
				const height = imageHeight + 300
				const form = [{
					text: this.params.title,
					x: 280,
					y: imageHeight + 80,
					color: '#fff',
					size: 32,
					lines: 1,
					width: 430,
					style: 'fill',
					type: 'text'
				}, {
					text: this.params.description || '这是来自《' + this.params.sourceName + '》的' + (this.params.type || '资源'),
					x: 280,
					y: imageHeight + 120,
					color: '#999',
					size: 24,
					width: 400,
					lineHeight: uni.upx2px(10),
					lines: 4,
					style: 'fill',
					type: 'text'
				}, {
					text: 'By   ' + appName,
					x: 580,
					y: imageHeight + 280,
					color: '#999',
					size: 18,
					style: 'fill',
					type: 'text'
				}, {
					src: 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&margin=10&data=' + this.params.shareUrl,
					x: 50,
					y: imageHeight + 50,
					width: 200,
					height: 200,
					type: 'image'
				}, {
					text: '长按识别二维码',
					x: 80,
					y: imageHeight + 280,
					color: '#999',
					size: 20,
					style: 'fill',
					type: 'text'
				}]
				const options = {
					width: 750,
					height: height,
					background: this.skinColor.color_black,
					radius: 20
				}
				if (src) {
					form.unshift({
						src: src,
						x: 25,
						y: 25,
						width: 700,
						height: imageHeight,
						type: 'image'
					})
				}
				this.$refs.poster.start({
					options: options,
					data: form,
					success: (res) => {
						this.show = true
						this.poster = res.tempFilePath
					},
					fail: (err) => {
						this.$refs.notify.fail('生成海报失败')
					}
				})
			},
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: () => {
						this.$refs.notify.success('成功保存图片到相册')
					},
					fail: err => {
						this.$refs.notify.fail(JSON.stringify(err))
					}
				})
			},
			share() {
				this.app.$utils.shareFile(this.poster)
			},
			hide() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}

	.poster-btns {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.poster-btn {
		padding: 30rpx 0;
		font-size: 38rpx;
		text-align: center;
	}

	.poster-image {
		width: 700rpx;
		min-height: 1000rpx;
		margin: 0 25rpx;
	}
</style>